<script lang="ts" setup>
import { gameAssetManager } from '@/LcuApi/gameAsset'
import { defineProps, onMounted, ref, useAttrs, watch } from 'vue'

// props
const props = defineProps({
  id: {
    type: [Number, String],
    required: true,
  },
  lazy: {
    type: Boolean,
    default: true,
  },
  type: {
    // profile | champion | item | spell | rune | map | tier
    type: String,
    required: true,
  },
  width: {
    default: '100%',
  },
  height: {
    default: '100%',
  },
  // 圆角
  radius: {
    type: String,
    default: '0',
  },
  fit: {
    type: String,
    default: 'fill',
  },
  // 等比放大
  scale: {
    type: Number,
    default: 1,
  },
})

// 获取 attrs 对象
const attrs = useAttrs();

const src = ref<any>('')
const isLazy = ref<boolean>(false)

// 监听变化
watch(
  () => props.id,
  () => getSrcById(),
  { immediate: true },
)
watch(
  () => props.type,
  () => getSrcById(),
  { immediate: true },
)

function getSrcById() {
  const { id } = props

  src.value = ''
  if (id && isLazy.value) {
    switch (props.type) {
      case 'profile':
        // profile 用户头像，传递 profileIconId
        gameAssetManager.getProfileIcon(id).then(({ url }) => {
          src.value = url || ''
        })
        break
      case 'champion':
        // champion 英雄，传递 championId
        gameAssetManager.getSquareById(id || -1).then((url) => {
          src.value = url || ''
        })
        break
      case 'item':
        // item 装备，传递 itemId
        gameAssetManager.getItemInfo(id).then(({ url }) => {
          src.value = url || ''
        })
        break
      case 'spell':
        // spell 召唤师技能，传递 spellId
        gameAssetManager.getSummonerSpellInfo(id).then(({ url }) => {
          src.value = url || ''
        })
        break
      case 'rune':
        // rune 符文，传递 runeId
        gameAssetManager.getRuneInfo(id).then(({ url }) => {
          src.value = url || ''
        })
        break
      case 'map':
        // map 地图，传递 mapId
        gameAssetManager.getMapInfo(id).then(({ url }) => {
          src.value = url || ''
        })
        break
      case 'tier':
        // tier 段位，传递英文名，图标从本地读取
        if (id && tierIcon[id.toString().toLowerCase()]) {
          src.value = tierIcon[id.toString().toLowerCase()] || ''
        } else {
          src.value = RankedNone
        }
        break
      case 'smallTier':
        // smallTier 小段位，传递英文名，图标从本地读取
        if (id && smallTierIcon[id.toString().toLowerCase()]) {
          src.value = smallTierIcon[id.toString().toLowerCase()] || ''
        } else {
          src.value = RankedNone
        }
        break
      default:
        src.value = ''
        break
    }
  } else {
    src.value = ''
  }
}

const imageRef = ref(null)
// 实现懒加载
onMounted(() => {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      // 进入可视区域，加载图片
      isLazy.value = true
      observer.unobserve(imageRef.value)
      getSrcById()
    }
  })
  observer.observe(imageRef.value)
})
</script>

<template>
  <div ref="imageRef" class="lcu_image" :style="{ width, height, 'border-radius': radius }">
    <transition name="fade" mode="out-in">
      <a-image v-if="src" v-bind="$attrs" width="100%" height="100%" :src="src" :fit="fit" :preview="false" />
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.lcu_image {
  overflow: hidden;

  .fade-enter-active {
    transition: opacity 0.5s;
  }

  .fade-enter-from {
    opacity: 0;
  }

  /* 禁用离开动画 */
  .fade-leave-active {
    transition-duration: 0s;
    /* 离开动画时间为0 */
  }

  .fade-leave-to {
    opacity: 1;
    /* 保持最终状态不变 */
  }

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
